<!--
 - Copyright 2022. Huawei Technologies Co., Ltd. All rights reserved.

 - Licensed under the Apache License, Version 2.0 (the "License");
 - you may not use this file except in compliance with the License.
 - You may obtain a copy of the License at

 -   http://www.apache.org/licenses/LICENSE-2.0

 - Unless required by applicable law or agreed to in writing, software
 - distributed under the License is distributed on an "AS IS" BASIS,
 - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 - See the License for the specific language governing permissions and
 - limitations under the License.
 -->

<!-- 热门推荐 -->
<template>
    <div class="top_recommend_container">
        <div class="title_line" :class="{'rtl-l text-r': $rtl}">{{$t('BDT_fascialgun_top_recommendation')}}</div>
        <div
            class="courses_banner"
            :style="{ 'background-color': background }"
            v-for="(item, i) in coursesList"
            :key="i"
        >
            <p class="courses_name" :class="{'rtl-l text-r': $rtl}">{{ item.name }}</p>
            <p class="courses_description" :class="{'rtl-l text-r': $rtl}">{{ item.description }}</p>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            coursesList: [
                {
                    name: "筋膜枪课程1",
                    description: "远离酸痛",
                    backIcon: require("@/assets/image/mode_btn_shoulder.png")
                },
                {
                    name: "筋膜枪课程2",
                    description: "远离烦恼",
                    backIcon: require("@/assets/image/mode_btn_shoulder.png")
                },
                {
                    name: "筋膜枪课程3",
                    description: "拯救不开心",
                    backIcon: require("@/assets/image/mode_btn_shoulder.png")
                }
            ],
            background: window.isDark ? '#202224' : '#FFFFFF'
        }
    }
}
</script>

<style scoped>
    .top_recommend_container{
        margin-top: 1rem;
    }

    .title_line{
        font-weight: 500;
        font-size: 1.6rem;
        height: 3.8rem;
        line-height: 3.8rem;
        padding-left: 1.2rem;
    }

    .courses_banner{
        height: 12.4rem;
        background: #fff;
        border-radius: 1.6rem;
        padding: .86rem .8rem .86rem 1.2rem;
        margin-bottom: 1.2rem;
    }

    .courses_banner:last-child{
        margin-bottom: 0
    }

    .courses_name{
        font-stretch: 1.44rem;
    }

    .courses_description{
        opacity: .7;
        margin-top: .24rem;
        word-break: break-word;
    }
</style>